<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('房源信息管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    if(sessionStorage.jwt ==null||sessionStorage.jwt<2){
        swal("您没有权限访问该界面","","error")
        self.location="home"
    }

    $(function(){
        var data4Vue = {
            uri:'hhouses',
            beans: [],
            bean: { id: 0,location:'',price:'',remark:"",num:1},
            user:{name:'',username:'',vx:"",qq:'',password:'',repeatpassword:''}
        };
        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list();
            },
            methods: {
                list:function(){
                    var url =  this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                    });
                },
                clear:function () {
                    vue.bean =  { id: 0, name: '',location:'',price:'',remark:"",num:1,householder:{'id':0}};
                },
                add: function () {
                    if(!checkEmpty(this.bean.location, "位置"))
                        return;
                    if (!checkEmpty(this.bean.price, "价格"))
                        return;
                    if (!checkInt(this.bean.num, "数量"))
                        return;
                    if (!checkEmpty(this.bean.remark, "备注"))
                        return;
                    var url = this.uri;
                    axios.post(url,this.bean).then(function(response){
                        swal("添加成功！", "快来添加房源图片吧，审核通过后即可在首页显示！","success")
                        $('#myModal1').modal('hide');
                        vue.list();
                        vue.bean =  { id: 0,location:'',price:'',remark:"",num:1};
                    });
                },
//                获取房源信息
                get:function (id) {
                    var url = "houses/"+id;
                    axios.get(url).then(function(response) {
                        vue.bean = response.data;
                        vue.householder = vue.bean.householder;
                    });
                },
                up:function (id) {
                    var url = "uphhouses/"+id;
                    axios.put(url).then(function (response) {
                        swal("房源上架成功！", "","success")
                        vue.list();
                    })
                    
                },
                down:function (id) {
                    var url = "downhhouses/"+id;
                    axios.put(url).then(function (response) {
                        swal("房源下架成功！", "","success")
                        vue.list();
                    })

                },
//                获取用户信息（含户主信息）
                hget:function () {
                    var url="husers"
                    axios.get(url).then(function (response) {
                        vue.user=response.data;

                        vue.user.repeatpassword=vue.user.password;
                    })
                },

//                修改用户信息（含户主信息）
                hupdate:function () {
                    if(!checkEmpty(this.user.name, "真实姓名"))
                        return;
                    if (!checkEmpty(this.user.username, "用户名"))
                        return;
                    if (!checkEmpty(this.user.vx, "微信"))
                        return;
                    if (!checkEmpty(this.user.qq, "qq"))
                        return;
                    if (!checkEmpty(this.user.password, "密码"))
                        return;
                    if (!checkEmpty(this.user.repeatpassword, "确认密码"))
                        return;
                    if (this.user.password !=this.user.repeatpassword)
                    {
                        swal("密码不一致!");
                        return;
                    }
                    var url = "husers";
                    axios.put(url,vue.user).then(function(response){
                        swal("修改成功！", "您的信息成功被修改！","success")
                        $('#myModal2').modal('hide');
                    });
                },
                update:function () {
                    if(!checkEmpty(this.bean.location, "位置"))
                        return;
                    if (!checkEmpty(this.bean.price, "价格"))
                        return;
                    if (!checkInt(this.bean.num, "数量"))
                        return;
                    if (!checkEmpty(this.bean.remark, "备注"))
                        return;
                    var url = "houses";
                    axios.put(url,vue.bean).then(function(response){
                        swal("修改成功！", "该房源信息成功被修改！","success")
                        $('#myModal').modal('hide');
                        vue.list();
                        vue.bean =  { id: 0,location:'',price:'',remark:"",num:1};
                    });
                },
                deleteBean: function (id) {
                    var url = "houses/"+id;
                    swal({
                            title: "确定删除吗？",
                            text: "这样做会删除该房源底下的全部图片",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "确定删除！",
                            cancelButtonText: "取消删除！",
                            closeOnConfirm: false
                        },
                        function(){
                            axios.delete(url).then(function(response){
                                swal("删除成功！", "该房源信息已从数据库中移除","success")
                                vue.list();
                            });
                        });
                },
            }
        });
        Vue.filter('formatDateFilter', function (value, formatString) {
            if(null==value)
                return "";
            formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
            return moment(value).format(formatString);
        });
    });

</script>

<div class="page"  id="workingArea">

    <!-- 左部 -->
    <div class="page-content d-flex align-items-stretch" >

        <nav class="side-navbar">
            <!-- 头像名字部分-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="avatar"><img src="img/admin/admin.jpg" alt="..." class="img-fluid rounded-circle"></div>
                <div class="title">
                    <h1 class="h4" >户主，您好</h1>
                    <p>Welcome</p>
                </div>
            </div>

            <!-- 左边菜单-->
            <span class="heading">功能</span>
            <ul class="list-unstyled">
                <li class="active"><a href="hadmin_house">房源管理 </a></li>
                <li><a data-toggle="modal" data-target="#myModal2" @click="hget" >修改个人信息</a></li>
                <li><a href="home">前台首页</a></li>
                <li><a href="chatroom">前台聊天室</a></li>
                <li><a href="forelogout">退出登录</a></li>
            </ul>
        </nav>

        <!-- 右部部分 -->
        <div class="content-inner" >
            <!-- 管理标题-->
            <header class="page-header">
                <div class="container-fluid">
                        <h2 class="no-margin-bottom">房源信息管理</h2>
                </div>
            </header>
            <!-- 表格 -->
            <section class="tables" >
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive" >
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th style="width:5%">图片</th>
                                                <th >位置</th>
                                                <th >价格</th>
                                                <th style="width:5%">数量</th>
                                                <th>初始日期</th>
                                                <th >备注</th>
                                                <th style="width:6%">状态</th>
                                                <th>收藏</th>
                                                <th>浏览</th>
                                                <th style="width:7%">图片管理</th>
                                                <th style="width:1%">修改</th>
                                                <th style="width:1%">删除</th>
                                                <th style="width:7%">上/下架</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr v-for="bean in beans">

                                                <!--本地-->
                                                <!--<td><img v-if="null != bean.firstHouseImage" width="40px" :src="'img/houseSingle/'+bean.firstHouseImage.id+'.jpg'"></td>-->
                                                <!--服务器-->
                                                <td><img v-if="null != bean.firstHouseImage" width="40px" :src="'http://116.62.79.166:8080/img/renting/houseSingle/'+bean.firstHouseImage.id+'.jpg'"></td>

                                                <td>{{bean.location}}</td>
                                                <td>{{bean.price}}</td>
                                                <td>{{bean.num}}</td>
                                                <td>{{bean.createDate| formatDateFilter}}</td>
                                                <td>{{bean.remark}}</td>
                                                <td>{{bean.state}}</td>
                                                <td>{{bean.colnum}}</td>
                                                <td>{{bean.scannum}}</td>
                                                <td><a :href="'hadmin_houseimage?hid=' + bean.id "><img src="img/admin/manage.jpg" width="30" ></a></td>
                                                <td><a herf="#" @click="get(bean.id)"><span data-toggle="modal" data-target="#myModal"><img src="img/admin/edit.jpg" width="30" ></span></a></td>
                                                <td><a @click="deleteBean(bean.id)"><img src="img/admin/delete.jpg" width="30" ></a></td>
                                                <td><button v-if="bean.state=='上架'"  class="btn btn-primary btn-xs" @click="down(bean.id)">下架</button>
                                                    <button v-if="bean.state=='下架'"  class="btn btn-primary btn-xs" @click="up(bean.id)">上架</button>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="modal fade" id="myModal"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">修改房源信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">
                                <table class="table table-hover" align="center">
                                    <tr>
                                        <td>位置</td>
                                        <td><input      v-model="bean.location" class="form-control" placeholder="请输入房源位置"></td>
                                    </tr>
                                    <tr>
                                        <td>价格</td>
                                        <td><input     v-model="bean.price" class="form-control" placeholder="请输入价格"></td>
                                    </tr>
                                    <tr>
                                        <td>数量</td>
                                        <td><input    v-model="bean.num" class="form-control" placeholder="请输入房间数量"></td>
                                    </tr>
                                    <tr>
                                        <td>备注</td>
                                        <td><input     v-model="bean.remark" class="form-control" placeholder="请填写备注"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button" @click="clear">关闭</button>
                            <button  class="btn btn-default" type="button" @click="update">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>

            <div align="center">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
                     添加房源
                </button>
            </div>
            <div class="modal fade" id="myModal1"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">添加房源信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">
                                <table class="table table-hover" align="center" >
                                    <tr >
                                        <td>位置</td>
                                        <td><input    type="text"  v-model="bean.location" class="form-control" placeholder="请输入房源位置"></td>
                                    </tr>
                                    <tr>
                                        <td>价格</td>
                                        <td><input    type="text"  v-model="bean.price" class="form-control" placeholder="请输入价格"></td>
                                    </tr>
                                    <tr>
                                        <td>数量</td>
                                        <td><input   type="text"  v-model="bean.num" class="form-control" placeholder="请输入房间数量"></td>
                                    </tr>
                                    <tr>
                                        <td>备注</td>
                                        <td><input    type="text"  v-model="bean.remark" class="form-control" placeholder="请填写备注"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button" >关闭</button>
                            <button  class="btn btn-default" type="button" @click="add">提交</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>

            <!--修改户主（含用户）信息-->
            <div class="modal fade" id="myModal2"  data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!-- <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> -->
                            <h4 class="modal-title">修改您的户主信息，这些信息方便租客联系您</h4>
                        </div>
                        <div class="modal-body">
                            <div class="panel-body">
                                <table class="table table-hover" align="center">
                                    <tr>
                                        <td>真实姓名</td>
                                        <td><input    type="text"  v-model="user.name" class="form-control" placeholder="请输入真实姓名"></td>
                                    </tr>
                                    <tr>
                                        <td>用户名</td>
                                        <td><input   maxlength="11" type="text"  v-model="user.username" class="form-control" placeholder="请输入用户名"></td>
                                    </tr>
                                    <tr>
                                        <td>微信</td>
                                        <td><input    type="text"  v-model="user.vx" class="form-control" placeholder="请输入vx"></td>
                                    </tr>
                                    <tr>
                                        <td>qq</td>
                                        <td><input   type="text"  v-model="user.qq" class="form-control" placeholder="请输入qq"></td>
                                    </tr>
                                    <tr>
                                        <td>密码</td>
                                        <td><input    type="password"  v-model="user.password" class="form-control" placeholder="请输入密码"></td>
                                    </tr>
                                    <tr>
                                        <td>确认密码</td>
                                        <td><input    type="password"  v-model="user.repeatpassword" class="form-control" placeholder="请输入重复密码"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button data-dismiss="modal" class="btn btn-default" type="button" @click="clear">关闭</button>
                            <button  class="btn btn-default" type="button" @click="hupdate">修改</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <!--页脚部分-->
            <div th:replace="include/admin/adminFooter::html" ></div>
        </div>
    </div>
</div>
</body>
</html>
